<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="header">
        <el-header>
            <div class="title">流浪动物管理系统</div>
            <div>
                用户：{{ email }}
                <el-button type="danger" size="small" @click="handleLogOut">退出登录</el-button>
            </div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken';
export default {
    data(){
        return{
            email:''
        }
    },
    created(){
        this.email=getToken('email')
    },
    methods:{
        handleLogOut(){
            this.$router.push('/users/login')
        }
    }
}
</script>
<style lang="scss" scoped>
.header{
    .el-header{
        background: #409eff;
        color: black;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        opacity: 0.9;
        position: absolute;
        background: url('@/assets/headbg1.png') center content-box;
        .title{
            font-size: 24px;
            width: 200px;
        }
    }
}
</style>